<div class="col-lg-12">
  <div class="card">
    <div class="card-header">
      <i class="fa fa-align-justify"></i> Content Type
      <a href="javascript:void(0)" onclick="openNewContentTypeModal()"
        class="btn btn-success float-right new-content-type">New Content Type</a>
    </div>
    <div class="card-body page-list">
      <table class="table table-responsive-sm table-striped">
        <thead>
          <tr>
            <th>Title</th>
            <th>Module</th>
            <th>Content</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>

          {{!-- {{log data}} --}}
          {{#each data}}
          <tr>
            <td><a href="/admin/content-types/edit/{{ this.systemId }}">{{ this.title }}</a></td>
            <td><a href="/admin/modules/edit/{{ this.moduleSystemId }}">{{ this.moduleSystemId }}</a></td>
            <td>{{ contentType.description}}</td>
            <td>
              <a class="btn btn-sm btn-primary rmargin" href="/admin/content-types/edit/{{ this.systemId }}">Edit</a>




              <a tabindex="0" class="btn btn-sm btn-danger" role="button" data-html="true" data-toggle="popover"
                data-trigger="focus" aria-label="Delete {{ this.title }}"
                title="Delete <b>{{ this.title }}</b> Forever?" data-content="<a href='/contentType/{{ this.systemId }}/{{../data.sessionID}}'
   class='btn btn-sm btn-danger rmargin custom-delete'>Confirm Delete</a>
">Delete</a>


              {{!-- <button type="button" class="btn btn-sm btn-danger" data-toggle="popover"
 title="Delete Content Type {{ this.title }}" data-html="true"
data-content="<a class='btn btn-sm btn-danger' onclick='deleteContentType({{ this.id }})' >Confirm Delete?</a>">Delete</button> --}}


              {{!-- <ng-template #popTitle>Delete <b>{{ contentType.name }}</b>?</ng-template>
              <ng-template #popContent><button class="btn btn-sm btn-danger"
                  (click)="deleteContentType(contentType.id)">Confirm Delete</button></ng-template>
              <button class="btn btn-sm btn-danger" placement="top" [ngbPopover]="popContent"
                [popoverTitle]="popTitle">Delete</button> --}}
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>

      <!-- <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="#">Prev</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#">Next</a>
                </li>
              </ul> -->
    </div>
  </div>
</div>


<!-- Section Editor Modal -->
<div class="modal fade" id="newContentTypeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Content Type</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <h6>To create a new content type, first select a <a href='/admin/modules/'>module</a>, then add a new content type to it.</h6>

      </div>
      {{!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success wysiwyg-save" onclick='saveNewContentType()'
          data-dismiss="modal">Create</button>
      </div> --}}
    </div>
  </div>
</div>
